<template>
	<view class="image-display" :style="customStyle">
		<loading-mask :text="text" v-model="avatarGridLoading">
			<image class="img" :src="src" :mode="mode" :lazy-load="lazyLoad" :webp="webp" @load="handleLoad"
				@error="handleError" @click="handleClick" :style="customStyle" />
		</loading-mask>
	</view>
</template>

<script>
	export default {
		name: 'image-display',
		props: {
			src: {
				type: String,
				default: ''
			},
			mode: {
				type: String,
				default: 'widthFix'
			},
			lazyLoad: {
				type: Boolean,
				default: false
			},
			webp: {
				type: Boolean,
				default: false
			},
			text: {
				type: String,
				default: ''
			},
			customStyle: {
				type: [String, Object],
				default: ""
			},
		},
		data() {
			return {
				avatarGridLoading: true
			};
		},
		methods: {
			handleLoad(event) {
				this.$nextTick(() => {
					this.avatarGridLoading = false;
				});
				this.$emit('load', event);
			},
			handleError(event) {
				this.$nextTick(() => {
					this.avatarGridLoading = false;
				});
				this.$emit('error', event);
			},
			handleClick(event) {
				this.$emit('click', event);
			}
		}
	};
</script>

<style scoped lang="scss">
	.image-display {
		display: inline-block;
		position: relative;
		border-radius: 8px;

		.img {
			border-radius: 8px;
		}
	}
</style>